Documentation/ Colors

Each color includes its own sass function. You should never need to use the hex value. Rather, call the Sass function when creating a new element

The colors have been tested for accessibility compliance against three common backgrounds: white #fff, light gray rgb(222,222,222), and black #000. When a color's contrast ratio score is less than 3.0 it fails and that color combination should never be used. When a color's contrast ratio gets a score of at least 3.0 it can used for large text, or text that is 18px or larger. Then when a color's contrast ratio passes it can be used on any text size against the background color it was tested against.

Color Name Hex Sass Function Contrast with White Background Contrast with Gray Background Contrast with Black Background
Arch Black 
#000000
 
color(black)
 ✅
21
 ✅
15.6
 ❌
1
Bulldog Red 
#ba0c2f
 
color(red)
 ✅
6.6
 ✅
4.9
 ⚠️
3.18
Chapel Bell White 
#ffffff
 
color(white)
 ❌
1
 ❌
1.34
 ✅
21
Glory Glory 
#e4002b
 
color(glory)
 ✅
4.84
 ⚠️
3.6
 ⚠️
4.33
Lake Herrick 
#00a3ad
 
color(lake)
 ⚠️
3.06
 ❌
2.28
 ✅
6.84
Hedges 
#b7bf10
 
color(hedges)
 ❌
2
 ❌
1.49
 ✅
10.47
Olympic 
#004e60
 
color(olympic)
 ✅
9.29
 ✅
6.91
 ❌
2.25
Sanford 
#554f47
 
color(sanford)
 ✅
8.09
 ✅
6.01
 ❌
2.59
Herty Field 
#594a25
 
color(field)
 ✅
8.63
 ✅
6.42
 ❌
2.43
Athens 
#66435a
 
color(athens)
 ✅
8.34
 ✅
6.2
 ❌
2.51
Stegeman 
#9ea2a2
 
color(stegeman)
 ❌
2.57
 ❌
1.91
 ✅
8.14
Creamery 
#d6d2c4
 
color(creamery)
 ❌
1.51
 ❌
1.12
 ✅
13.87
Odyssey 
#c8d8eb
 
color(odyssey)
 ❌
1.45
 ❌
1.07
 ✅
14.47
Gray 
#dedede
 
color(gray)
 ❌
1.34
 ❌
1
 ✅
15.6
Light Gray 
#f2f2f2
 
color(light-gray)
 ❌
1.11
 ❌
1
 ✅
18.75
Dark Gray 
#666666
 
color(dark-gray)
 ✅
5.74
 ⚠️
4.26
 ⚠️
3.65

Color Classes

Text Color

Class Description
.util-color-black Sets the text color to be #000000
.util-color-red Sets the text color to be #ba0c2f
.util-color-white Sets the text color to be #ffffff
.util-color-glory Sets the text color to be #e4002b
.util-color-lake Sets the text color to be #00a3ad
.util-color-hedges Sets the text color to be #b7bf10
.util-color-olympic Sets the text color to be #004e60
.util-color-sanford Sets the text color to be #554f47
.util-color-field Sets the text color to be #594a25
.util-color-athens Sets the text color to be #66435a
.util-color-stegeman Sets the text color to be #9ea2a2
.util-color-creamery Sets the text color to be #d6d2c4
.util-color-odyssey Sets the text color to be #c8d8eb
.util-color-gray Sets the text color to be #dedede
.util-color-light-gray Sets the text color to be #f2f2f2
.util-color-dark-gray Sets the text color to be #666666

Background Color

Class Description
.util-background-black Sets the background color to be #000000
.util-background-red Sets the background color to be #ba0c2f
.util-background-white Sets the background color to be #ffffff
.util-background-glory Sets the background color to be #e4002b
.util-background-lake Sets the background color to be #00a3ad
.util-background-hedges Sets the background color to be #b7bf10
.util-background-olympic Sets the background color to be #004e60
.util-background-sanford Sets the background color to be #554f47
.util-background-field Sets the background color to be #594a25
.util-background-athens Sets the background color to be #66435a
.util-background-stegeman Sets the background color to be #9ea2a2
.util-background-creamery Sets the background color to be #d6d2c4
.util-background-odyssey Sets the background color to be #c8d8eb
.util-background-gray Sets the background color to be #dedede
.util-background-light-gray Sets the background color to be #f2f2f2
.util-background-dark-gray Sets the background color to be #666666

Color Tints

The colors documented in the table below can be used at a variety of tint values. To use the tinted color, you should construct the color class as util-color-{colorName}__tintValue or util-background-{colorName}__tintValue. The following colors and tin values can be used in combination:

  • Sanford and Herty Field: 30% and 50%
  • Stegeman, Creamery, and Odyssey: 30%, 50%, and 75%

For example, to use Sanford as a background color at 50% the class would be util-background-sanford__50.

Color Name Hex Tint Level Contrast with White Background Contrast with Gray Background Contrast with Black Background
Sanford 
#88847e
 30% ⚠️
3.71
 ❌
2.76
 ✅
5.64
Sanford 
#aaa7a3
 50% ❌
2.39
 ❌
1.78
 ✅
8.76
Herty Field 
#8b8066
 30% ⚠️
3.9
 ❌
2.9
 ✅
5.37
Herty Field 
#aca592
 50% ❌
2.45
 ❌
1.82
 ✅
8.55
Stegeman 
#bbbebe
 30% ❌
1.87
 ❌
1.39
 ✅
11.22
Stegeman 
#cfd1d1
 50% ❌
1.53
 ❌
1.13
 ✅
13.69
Stegeman 
#e7e8e8
 75% ❌
1.22
 ❌
1.09
 ✅
17.1
Creamery 
#e2e0d6
 30% ❌
1.32
 ❌
1.01
 ✅
15.86
Creamery 
#ebe9e2
 50% ❌
1.21
 ❌
1.1
 ✅
17.28
Creamery 
#f5f4f0
 75% ❌
1.1
 ❌
1.22
 ✅
19.08
Odyssey 
#d9e4f1
 30% ❌
1.28
 ❌
1.04
 ✅
16.31
Odyssey 
#e4ecf5
 50% ❌
1.19
 ❌
1.12
 ✅
17.61
Odyssey 
#f1f5fa
 75% ❌
1.09
 ❌
1.22
 ✅
19.18